<script setup>
// 交错的列表过渡。如果通过data attribute 用 Javascript 来执行过渡时，那么我们也可以实现列表中的交错过渡。
// 我们可以把某一项的索引作为DOM元素上的一个data attribute 呈现出来
import { ref, computed } from 'vue'
import gsap from 'gsap'

const list = [
  { msg: 'Hello Everyone' },
  { msg: 'Hello Kitty' },
  { msg: 'Kong Fu' },
  { msg: 'Chuck Norris' },
  { msg: 'Jet Li' },
  { msg: 'Kung Fury' }
]
const query = ref('')

const computedList = computed(() => {
  return list.filter((item) => item.msg.toLowerCase().includes(query.value))
})

function onBeforeEnter(el) {
  el.style.opacity = 0
  el.style.height = 0
}

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.1,
    onComplete: done
  })
}

function onLeave(el, done) {
  gsap.to(el, {
    opacity: 0,
    height: 0,
    delay: el.dataset.index * 0.1,
    onComplete: done
  })
}
</script>
<template>
  <input v-model="query" />
  <TransitionGroup
    tag="ul"
    :css="false"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave">
    <li
      v-for="(item, index) in computedList"
      :key="item.msg"
      :data-index="index">
      {{ item.msg }}
    </li>
  </TransitionGroup>
</template>
